<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>banner切换</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			.box{
                position: relative;
                width: 738px;
				margin:100px auto;
            }
            /*模式切换样式*/
            .box span{
                display: inline-block;
                width: 80px;
                height:30px;
                background-color: red;
                line-height: 30px;
                text-align:center;
                font-size: 20px;
                margin-left:5px;
            }
            .box .twe{
                background-color: pink;
            }
            /*列表*/
            .box ul{
                overflow: hidden;
                width: 738px;
				height: 430px; 
            }
            .box li{
                display:none;
                width: 738px;
				height: 430px;
            }
            /*左*/
            .box span.prve{
                position: absolute;
                top:45%;
                left:0;
            }
            /*右*/
            .box span.next{
                position: absolute;
                top:45%;
                right:0;
            }
            /*上*/
            .box .top{
                position: absolute;
                top:30px;
                left:0;
                width:100%;
                background-color:rgba(0, 0, 0, .8);
                text-align:center;
               font-size: 20px;
            }
            .box .top span{
                width:20px;
                background-color:rgba(0, 0, 0, .2);
            }
            /*下*/
            .box .botton{
                position: absolute;
                bottom:0;
                left: 0;
                width:100%;
                background-color:rgba(0, 0, 0, .8);
                font-size: 20px;
                text-align: center;
            }
            /*模式控制*/
            .on{
                background-color: pink;
            }
		</style>
	</head>
	<body>

        <div class="box">
            <span class="twe">循环</span><span class="one">单边</span>
            <ul>
                <li style="background:darkgray;"><img src="st1.jpg" alt=""></li>
                <li style="background:#f66"><img src="st2.jpg" alt=""></li>
                <li style="background:pink"><img src="st3.jpg" alt=""></li>
                <li style="background:blue"><img src="st4.jpg" alt=""></li>
                <li style="background:yellow"><img src="st5.jpg" alt=""></li>
            </ul>
            <span class="prve">左</span><span class="next">右</span>
            <p class="top"><span>1</span>/5</p>
            <p class="botton">第一张</p>
        </div>

		<script type="text/javascript">
		//完成左右切换
        //完成循环切换
        //完成模式切换
        //完成上下同步 完成效果
		
        //1 完成右切换
        var oNext = document.getElementsByClassName("next")[0];
        var oPrve = document.getElementsByClassName("prve")[0];
        var oLi = document.getElementsByTagName("li");
        var oTwe =document.getElementsByClassName("twe")[0];
        var oOne =document.getElementsByClassName("one")[0];
        var oTop =document.getElementsByClassName("top")[0].getElementsByTagName("span")[0];
        var oBotton =document.getElementsByClassName("botton")[0];
        var i = 0;
        var bool=true;
        var aText=['第一张','第二张','第三张','第四张','第五张'];
        oLi[i].style.display = "block";
        /*循环*/
        oTwe.onclick = function(){
            oTwe.style.backgroundColor="pink";
            oOne.style.backgroundColor="red";
            bool=true;
        }
        //单边
        oOne.onclick = function(){
            oOne.style.backgroundColor="pink";
            oTwe.style.backgroundColor="red";
            bool=false;
        }
        /*右*/
        oNext.onclick = function(){
            if(i<4){
                oLi[i].style.display = "none";
                i++
                oLi[i].style.display = "block";
                oTop.innerHTML=i+1;
                oBotton.innerHTML = aText[i];
            }else{
                if(bool){
                    oLi[i].style.display = "none";
                    i=0;
                    oLi[i].style.display = "block";
                    oTop.innerHTML=i+1;
                    oBotton.innerHTML = aText[i];
                }else{
                    alert("到头了");
                }
               
            }
        }
        /*左*/
        oPrve.onclick = function(){
            if(i>0){
                oLi[i].style.display = "none";
                i--
                oLi[i].style.display = "block";
                oTop.innerHTML=i+1;
                oBotton.innerHTML = aText[i];
            }else{
                if(bool){
                    oLi[i].style.display = "none";
                    i=4;
                    oLi[i].style.display = "block";
                    oTop.innerHTML=i+1;
                    oBotton.innerHTML = aText[i];
                }else{
                    alert("到头了");
                }
               
            }
        }
		</script>	
	
		
	</body>
</html>
